<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>工单统计</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_historyfeesummary.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <style>
        .menu_tapmode {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list_txt span{
            border-left: none;
            padding-left: 15px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- <header class="topheader" id="aui-header" style="background:#289FFF;">
            <div class="aui_tab_box" style=" width: 98%; float: right;">
                <div class="aui-tab aui-tab-color" style="background: #289FFF;  padding-bottom: 8px; width: 100%;">
                    <div v-on:click="do_select_item(0)" class="aui-tab-item menu_tapmode"
                         style="margin-left: 10px;">
                        <div v-bind:class="{'aui-active':menuitem_selected==0}">
                            <label class="labelbox">
                                工单明细
                            </label>
                        </div>
                    </div>
                    <div v-on:click="do_select_item(1)" class="aui-tab-item menu_tapmode">
                        <div v-bind:class="{'aui-active':menuitem_selected==1}">
                            <label class="labelbox">
                                汇总分析
                            </label>
                        </div>
                    </div>
                    <div class="cl">
                    </div>
                </div>
            </div>
        </header> -->
        <!-- 弹框黑色背景 -->
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <!-- //项目筛选 -->
        <div v-if="showsearchparam" class="searchparam" style="height: 70%;">
            <div class="searchcontent" style="height: 100%;">
                <div class="searchparamtitle">
                    工单状态
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectstatus(item.ID)" v-bind:class="{'active':form.statusListIDS.indexOf(item.ID)>-1}" v-for="item in statusList">{{item.Name}}</label>
                </div>
                <div class="searchparamtitle">
                    项目名称
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectProject(item.ID)" v-bind:class="{'active':form.ProjectIDs.indexOf(item.ID)>-1}" v-for="item in projectList">{{item.Name}}</label>
                </div>
                <div class="aui_bottom">
                    <div v-on:click="doReset(1)" class="aui_bottombtn left">重置</div>
                    <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
                </div>
            </div>
        </div>
        <!-- 时间筛选 -->
        <div v-if="showsearchmonth" class="searchparam" >
            <div class="searchparamtitle">
                工单报修时间
            </div>
            <div class="searchparamitem">
                <label v-bind:class="{'active':form.activeDate==1}" v-on:click="doClickDay(1)">今日</label>
                <label v-bind:class="{'active':form.activeDate==2}" v-on:click="doClickDay(2)">本月</label>
                <label v-bind:class="{'active':form.activeDate==3}" v-on:click="doClickDay(3)">本年</label>
            </div>
            <div class="searchparamtitle">
                自定义
            </div>

            <div class="searchparamitem searchparamitem_input">
                <i class="icon iconfont icon-rili"></i>
                <span class="choose new-span-date" id="startdate" data-options='{"type":"date"}' v-bind:class="{'textColorPlaceholder':form.startTime==''}">{{form.startTime==''?'开始日期':form.startTime}}</span>
                <!--<input v-on:click="do_select_time(1)" v-model="form.startTime" readonly="readonly" type="text" placeholder="开始日期">-->
                <span style="padding: 0 10px;">
                    至
                </span>
                <span class="choose new-span-date" id="enddate" data-options='{"type":"date"}' v-bind:class="{'textColorPlaceholder':form.endTime==''}">{{form.endTime==''?'结束日期':form.endTime}}</span>
                <!--<input v-on:click="do_select_time(2)" v-model="form.endTime" readonly="readonly" type="text" placeholder="结束日期">-->
            </div>


            <!-- <div class="searchparamitem">
                <input v-on:click="do_select_time(1)" readonly="readonly" v-model="form.startTime" type="text" placeholder="开始日期">
                <span style="padding: 0 10px;">
                  至
                </span>
                <input v-on:click="do_select_time(1)" readonly="readonly" v-model="form.endTime" type="text" placeholder="结束日期">
            </div> -->
            <div class="aui_bottom">
                <div v-on:click="doReset(2)" class="aui_bottombtn left">重置</div>
                <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
            </div>
        </div>
        <div class="search_box bgshadow" v-bind:class="{'fixedbox':showsearch}" style="margin-top:0px ; background: #fff;">
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchparam}" v-on:click="doSelectSearchParam(1)">
                筛选
                <i v-if="!showsearchparam" class="icon iconfont icon-down"></i>
                <i v-if="showsearchparam" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchmonth}" v-on:click="doSelectSearchParam(2)">
                {{form.activeDateDesc}}
                <i v-if="!showsearchmonth" class="icon iconfont icon-down"></i>
                <i v-if="showsearchmonth" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
        </div>
        <!-- 汇总分析内容 ;-->
        <div class="aui-content" style="margin-top: 0.5rem;">
            <div class="list_txt"><span>{{form.startTime}} 至 {{form.endTime}} 统计</span> </div>
            <!-- <div class="border-btnline litile-line"></div> -->
            <div class="boxarea mainbox">
                <div class="app_list_txt"><span>关单率</span></div>
                <!-- <section class="aui-grid servicebox">
                    <div class="aui-row">
                        <div class="service_item">
                            <span>登记</span>
                            <label>{{summary.countForm.totalCount}}</label>
                        </div>
                        <div class="service_item">
                            <span>办结</span>
                            <label>{{summary.countForm.completeCount}}</label>
                        </div>
                        <div class="service_item">
                            <span>个人区域</span>
                            <label>{{summary.countForm.personalCount}}</label>
                        </div>
                        <div class="service_item">
                            <span>公共区域</span>
                            <label>{{summary.countForm.publicCount}}</label>
                        </div>
                    </div>
                </section> -->
                <div class="guandanSty">
                    <div class="completecicle">
                        <div class="annulusBasics">
                            <div class="centerCircle" v-if="summary.ClosePercent*100>0">{{summary.ClosePercent*100}}%</div>
                            <div class="centerCircle" v-else>0%</div>
                            <div class="annulusOuter"></div>
                            <div v-if="(summary.ClosePercent*100)>50" class="leftRectangle" style="transform:rotate(30deg)"></div>
                            <div v-if="(summary.ClosePercent*100)>50" class="rightRectangle" style="background: #289fff"></div>
                            <div v-if="(summary.ClosePercent*100)<=50" class="leftRectangle"></div>
                            <div v-if="(summary.ClosePercent*100)<=50" class="rightRectangle" v-bind:style="activeTransform"></div>
                            <div class=repairAnnulus></div>
                        </div>
                        <!-- <div style="text-align:center; font-size:0.7rem; font-weight:bold; padding-top:10px;">
                            办结率
                        </div> -->
                    </div>
                    <div class="CircleMsgbox">
                        <div class="msgitem fontstyle">
                            <div class="msg-title"><i class="icon iconfont icon-hongdian addmsg"></i>新增</div>
                            <div>{{summary.AllNumber}}</div>
                        </div>
                        <div class="msgitem fontstyle">
                            <div class="msg-title"><i class="icon iconfont icon-hongdian closemsg"></i>关单</div>
                            <div>{{summary.CloseNumber}}</div>
                        </div>
                    </div>
                </div>
                <div class="cl">
                </div>
            </div>

            <div class="boxarea mainbox">
                <div class="app_list_txt"><span>报修区域</span></div>
                <div style="margin-top: 10px; overflow: hidden;">
                    <div class="baoxiuItem">
                        <div class="baoxiuicon"><i class="icon iconfont icon-geren"></i></div>
                        <div class="baoxiu-mian">
                            <div class="content"><span>个人</span><span class="percent">{{summary.PersonalNumber}}</span></div>
                            <div class="work_con_box_right" style="width: 100%;">
                                <div class="prograssbg">
                                    <div class="prograssmsg"  v-if="((summary.PersonalNumber/summary.AllNumber)*100)>0"
                                    v-bind:style="{'width':((summary.PersonalNumber/summary.AllNumber)*100).toFixed(2)+'%'}"></div>
                                    <div class="prograssmsg"  v-else style="width: 0%;"></div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="baoxiuItem">
                        <div class="baoxiuicon"><i class="icon iconfont icon-gonggongchangsuojianceguanli"></i></div>
                        <div class="baoxiu-mian">
                            <div class="content"><span>公共</span><span class="percent">{{summary.PublicNumber}}</span></div>
                            <div class="work_con_box_right" style="width: 100%;">
                                <div class="prograssbg" style="background: #fffaf0;">
                                    <div class="prograssmsg" style="background: #fdcf6f;" v-if="((summary.PublicNumber/summary.AllNumber)*100)>0" v-bind:style="{'width':((summary.PublicNumber/summary.AllNumber)*100).toFixed(2)+'%'}"></div>
                                    <div class="prograssmsg" style="background: #fdcf6f; width: 0%;" v-else ></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="boxarea mainbox">
                <div class="app_list_txt"><span>工单类型</span></div>
                <div v-if="roomlist.length>0">
                    <div id="container" style="min-height: 300px; height: 450px;"></div>
                </div>
                <div v-else class="nodata">暂无数据</div>
            </div>
            <!-- <div class="roomsummary">
                <div class="room_itembox" v-for="item in summary.typeList">
                    <div class="room_item" style="background:#fff; padding: 10px 20px 10px 15px;">
                        <div class="room_title" style="color:#333;">
                            {{item.name}}
                            <div class="room_right" style="color:#333;">
                                <span>{{item.y}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>


    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/page/dateRangeUtil.js"></script>
<script type="text/javascript" src="../script/highcharts/highcharts.js"></script>
<script type="text/javascript" src="../script/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="js/analysis_customerservice_summary_process.js"></script>
<!-- <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->


</html>
